<template lang="">
  <div class="mine-edit">
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" />
    <div class="avatar">
      <van-image round fit="cover" :src="userInfo.photo" />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 3. 资料cell区域 -->
    <van-cell
      @click="showNameDialog"
      title="名称"
      :value="userInfo.name"
      is-link
    />
    <van-cell
      @click="showgender"
      title="性别"
      :value="userInfo.gender ? '男' : '女'"
      is-link
    />
    <van-cell
      @click="showbdy"
      title="生日"
      :value="userInfo.birthday"
      is-link
    />
    <!-- 弹出框 -->
    <van-dialog
      class="dialog-name"
      v-model="dialogShow"
      title="修改名称"
      show-cancel-button
      @confirm="changeName"
    >
      <van-field ref="nameInp" v-model="editName" />
    </van-dialog>
    <!-- 弹出层 -->
    <van-popup
      class="pop-gender"
      v-model="tanShow"
      position="bottom"
      :style="{ height: '18%' }"
    >
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="tanShow = false"
      />
      <van-cell @click="changeGender(1)" title="男" is-link />
      <van-cell @click="changeGender(0)" title="女" is-link />
    </van-popup>

    <!-- 生日模块 -->
    <van-popup v-model="bdyshow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        @confirm="changebdy"
        @cancel="bdyshow = false"
        v-model="bdyDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>

    <!-- 裁剪区域 -->
    <div class="crop-wrap" v-show="cropShow">
      <vueCropper
        ref="cropper"
        autoCrop
        autoCropWidth="150"
        autoCropHeight="150"
        :img="cropImg"
      ></vueCropper>
      <van-button @click="doCrop" type="primary">裁剪</van-button>
      <van-button @click="cropShow = false" type="primary">取消</van-button>
    </div>
  </div>
</template>
<script>
import { editProfileAPI,editAvatarAPI } from "@/api";
import { VueCropper } from "vue-cropper";
import moment from "moment";
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      bdyshow: false,
      tanShow: false,
      dialogShow: false,
      editName: "",
      bdyDate: "",
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2025, 10, 1),
      bdyDate: this.birthday,
      cropShow: false,
      cropImg: "",
    };
  },
  methods: {
    /* 名称修改 */
    showNameDialog() {
      this.dialogShow = true;
      this.editName = this.userInfo.name;
      this.$nextTick(() => {
        this.$refs.nameInp.focus();
      });
    },
    async changeName() {
      await editProfileAPI({
        name: this.editName,
      });
      this.$toast.success("修改成功");
      this.$store.commit("setUserInfo", {
        ...this.$store.state.userInfo,
        name: this.editName,
      });
    },
    /*性别修改 */
    showgender() {
      this.tanShow = true;
    },

    async changeGender(gender) {
      //优化性能
      if (gender === this.userInfo.gender) this.tanShow = false;
      await editProfileAPI({
        gender,
      });

      this.$toast.success("修改成功");
      this.$store.commit("setUserInfo", {
        ...this.userInfo,
        gender,
      });

      this.tanShow = false;
    },

    /* 生日模块 */
    showbdy() {
      this.bdyshow = true;
      this.bdyDate = new Date(this.userInfo.birthday);
      //   console.log(bdyDate);
    },
    async changebdy() {
      let birthday = moment(this.bdyDate).format("YYYY-MM-DD");
      await editProfileAPI({
        birthday,
      });

      this.$toast.success("修改成功");
      this.$store.commit("setUserInfo", {
        ...this.userInfo,
        birthday,
      });

      this.bdyshow = false;
    },
    afterRead(file) {
      // console.log('选择文件',file.content);
      // console.log('选择文件',file.file);
      this.cropShow = true;
      this.cropImg = file.content;
    },
    doCrop() {
      // 要不要拿到框选后裁剪的结果
      this.$refs.cropper.getCropBlob(async (data) => {
        let fm = new FormData();
        fm.append("photo", data);
        let res = await editAvatarAPI(fm);
        this.cropShow = false;
        this.$store.commit("setUserInfo", {
          ...this.userInfo,
          photo: res.data.data.photo,
        });
        this.$toast.success("修改成功");
      });
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  created() {
    this.$store.dispatch("reqUserInfo");
  },
};
</script>
<style lang="less" scoped>
.mine-edit {
  .avatar {
    height: 140;
    //    background-color: #ff0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .van-image {
      width: 120px;
      height: 120px;
    }
    .van-uploader {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      ::v-deep {
        .van-uploader__wrapper {
          width: 100%;
          height: 100%;

          .van-uploader__upload {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.dialog-name {
  .van-field {
    border: 1px solid #ddd;
  }
}
.crop-wrap {
  // 铺满整个屏幕
  // vw: viewport width 视口宽度
  // vh：viewport height 视口高度
  // 把视口宽度和高度各自分成100份，写100代表铺满
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #f00;
  .van-button {
    position: fixed;
    bottom: 0;
    left: 0;

    &:nth-of-type(2) {
      // 要把left给恢复成默认值
      left: auto;
      right: 0;
    }
  }
}
</style>
